// "use client";
// import React from 'react';
// import { Table, Empty, Button } from 'antd';
// import Link from 'next/link';
// import DelectBlogButton from './DelectBlogButton';

// const BlogList = ({ blogs }) => {
//   console.log("传递给 BlogListtttt 组件的博客数据:", blogs);


//   if (!blogs || !blogs.length) {
//     return <Empty description="暂无数据" />;
//   }

//   const columns = [
//     {
//       title: 'Blog ID',
//       dataIndex: 'blog_id',
//       key: 'blog_id',
//     },
//     {
//       title: 'User ID',
//       dataIndex: 'user_id',
//       key: 'user_id',
//     },
//     {
//       title: 'Title',
//       dataIndex: 'title',
//       key: 'title',
//     },
//     {
//       title: 'Content',
//       dataIndex: 'content',
//       key: 'content',
//     },
//     {
//       title: 'Created At',
//       dataIndex: 'created_at',
//       key: 'created_at',
//     },
//     {
//       title: 'Updated At',
//       dataIndex: 'updated_at',
//       key: 'updated_at',
//     },
//     {
//       title: 'Action',
//       key: 'action',
//       render: (_, row) => (
//         <div style={{ display: 'flex' }}>
//           <Link href={`/blog/${row.blog_id}`}>
//             <Button>查看详情</Button>
//           </Link>
//           <DelectBlogButton id={row.blog_id} />
//         </div>
//       ),
//     },
//   ];

//   return (
//     <div>
//       <h1>个人博客信息列表</h1>
      
//       <Table columns={columns} dataSource={blogs}  />
//     </div>
//   );
// };

// export default BlogList;

"use client";
import React, { useState } from 'react';
import { Table, Empty, Button, Space, Typography, Layout } from 'antd';
import Link from 'next/link';
import DelectBlogButton from './DelectBlogButton';

const { Title } = Typography;
const { Content } = Layout;

const BlogList = ({ blogs }) => {
  const [sortOrder, setSortOrder] = useState(null); // 状态来存储当前的排序顺序

  console.log("传递给 BlogListtttt 组件的博客数据:", blogs);

  if (!blogs || !blogs.length) {
    return <Empty description="暂无数据" />;
  }

  const handleSortByTime = () => {
    setSortOrder(sortOrder === 'ascend' ? 'descend' : 'ascend'); // 切换排序顺序
  };

  const columns = [
    // {
    //   title: 'Blog ID',
    //   dataIndex: 'blog_id',
    //   key: 'blog_id',
    // },
    {
      title: 'User ID',
      dataIndex: 'user_id',
      key: 'user_id',
    },
    {
      title: 'Title',
      dataIndex: 'title',
      key: 'title',
    },
    // {
    //   title: 'Content',
    //   dataIndex: 'content',
    //   key: 'content',
    // },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at',
      sorter: (a, b) => new Date(a.created_at) - new Date(b.created_at),
      sortOrder: sortOrder,
    },
    {
      title: 'Updated At',
      dataIndex: 'updated_at',
      key: 'updated_at',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, row) => (
        <Space>
          <Link href={`/blog/${row.blog_id}`}>
            <Button type="primary">查看详情</Button>
          </Link>
          <DelectBlogButton id={row.blog_id} />
        </Space>
      ),
    },
  ];

  return (
    <Layout style={{ padding: '24px' }}>
      <Content>
        <div style={{ marginBottom: '16px' }}>
          <Title level={2}>个人博客信息列表</Title>
          <Button type="default" onClick={handleSortByTime} style={{ marginBottom: '16px' }}>
            {sortOrder === 'ascend' ? '按时间降序排列' : '按时间升序排列'}
          </Button>
        </div>
        <Table columns={columns} dataSource={blogs} rowKey="blog_id" />
      </Content>
    </Layout>
  );
};

export default BlogList;


